<template>
  <div id="push-home">
    <push-header></push-header>
    <div class="body bg-color-gray">
      <div class="menu lf" :style="{ height: `${height}px` }">
        <happy-scroll color="rgba(189, 189, 189, .5)" resize>
          <div id="asd123">
            <el-menu :router="true" :unique-opened="true" :default-active="currentPath" >
              <el-submenu :index="index + ''" v-for="(item, index) in data" :key="item.id">
                <template slot="title">
                  <i class="iconfont" :class="item.obj.iconId" style="padding-right: 5px"></i>
                  <span>{{ item.obj.name }}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item :index="val.obj.url || '#'" v-for="val in item.children" :key="val.id" @click.native="updatePath(val.obj.url)">{{ val.obj.name }}</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </div>
        </happy-scroll>
      </div>
      <div class="body-header" :style="{ height: `${height}px` }">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import ajax from '../../api/ajax/ajax'
  import {
    GETMENU,
    GET_CURR_SYSTEM
  } from '../../api/url'
  import { mixinParams } from '../../assets/js/mixin1'
  import { mapGetters } from 'vuex'
  import pushHeader from '../mobilePush/comm/pushHeader'

  export default {
    components: {
      pushHeader
    },
    mixins: [mixinParams],
    data () {
      return {
        data: [],
        currentPath: '',
        height: null
      }
    },
    computed: {
      ...mapGetters([
        'sysName'
      ])
    },
    methods: {
      // 获取当前系统
      getCurrSystem () {
        ajax.post(GET_CURR_SYSTEM).then(res => {
          if (res.data === 'M205') {
            ajax.post(GETMENU, { sys_no: res.data }).then(res => {
              this.data = res.data
            })
          }
        })
      },
      // 更新页面路径
      updatePath (url) {
        this.pd_updatePath(url)
      }
    },
    created () {
      this.getCurrSystem()
      this.currentPath = this.$route.path
      this.height = window.innerHeight - 50
      window.onresize = () => {
        this.height = window.innerHeight - 50
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #push-home
    .header
      height 50px
      position relative
      z-index 99
    .body
      overflow hidden
      .menu
        width 200px
        background #333
        overflow auto
        .happy-scroll-container
          width 100% !important
          .happy-scroll-content
            width 100%
            .el-menu
              background #333
              border-right solid 0
            .el-submenu .el-menu-item
              padding-left 45px!important
              min-width 160px
              color #bbb
            .el-submenu__title, .el-submenu .el-menu-item
              height 35px
              line-height 35px
            .el-menu-item-group
              .el-menu-item-group__title
                padding 0
              .el-menu-item
                position relative
              .el-menu-item:before
                content ''
                width 3px
                height 3px
                background #666
                position absolute
                top 16px
                left 27px
            .el-submenu__title, i.iconfont
              color #bbb
            .el-menu-item:focus, .el-menu-item:hover
              background #333
            .el-submenu__title:focus, .el-submenu__title:hover
              background #4c4c4c
            .is-active
              .el-submenu__title, i.iconfont, span
                color #4093ff
              .el-menu-item-group
                .is-active
                  color #4093ff
              .el-menu-item:hover
                background #4c4c4c
              .is-active:hover
                color #fff
              .el-submenu__title:hover
                i.iconfont, span
                  color #fff
      .body-header
        overflow auto
        .el-input
          .el-input__inner
            font-size 12px
</style>
